<template>
  <!-- git test -->
	<div class="main">
		<div>
			<el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">   <!-- 标签页 -->
				<!-- 数据源部分 -->
				<el-tab-pane label="数据源" name="first">
					<el-row>
						<el-col :span="5" class="tree">
							<div class="dataSource">
								<el-tree class="elTree" ref="tree" :data="data"  node-key="id" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
							</div>
              <!-- <br/><br/><br/> -->
							<div class="buttonGroup">
								<el-button type="primary" plain icon="el-icon-plus" size="mini"  @click="dialogForm_AddClick()">添加</el-button>
								<el-button type="primary" plain icon="el-icon-minus" size="mini"  @click="dialogForm_DelClick()">删除</el-button>
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="NewColClick()">新建采集</el-button>
							</div>
						</el-col>
            <el-col :span="1">
              &nbsp;
            </el-col>
						<el-col :span="18">
							<div>
								<div class="breadcrumb">
									<el-breadcrumb separator-class="el-icon-arrow-right" class="des">
  									<el-breadcrumb-item>{{LABEL_1}}</el-breadcrumb-item>
 										<el-breadcrumb-item v-if="level>1">{{LABEL_2}}</el-breadcrumb-item>
                    <el-breadcrumb-item v-if="level>2">{{LABEL_3}}</el-breadcrumb-item>
									</el-breadcrumb>
								</div>
								<!-- <br/><br/><br/> -->
								<div class="decorationLine"></div>
								<div class="table1">
									<el-row>
                    <span class="des">基本信息</span>
										<el-button type="primary" size="small" icon="el-icon-edit" plain class="desbutton" @click="dialogForm_3Click(form_3,tableData_1)">修改</el-button>
									</el-row>
                  <br/>
                  <el-row>
                      <span><mailTable :tableData="tableData_1" :tableStyle="{ width:'100%' }"></mailTable></span>
                      <!-- <span><mailTable :tableStyle="{ width:'900px' }"></mailTable></span> -->
                  </el-row>
								</div>
                <!-- <br/><br/> -->
								<div class="decorationLine"></div>
								<div class="table2">
									<el-row>
                    <span class="des">连接参数</span>
                    <el-button type="primary" size="small" icon="el-icon-edit" plain class="desbutton" @click="dialogForm_4Click(form_4,tableData_2)">修改</el-button>
                  </el-row>
                  <br/>
                  <el-row>
                      <span><mailTable :tableData="tableData_2" :tableStyle="{ width:'100%' }"></mailTable></span>
                  </el-row>
								</div>
                <br/>
							</div>
						</el-col>
					</el-row>
          <!-- 添加的弹出框 -->
          <el-dialog title="添加子系统" :visible.sync="dialogForm_1Visible">
            <el-form :model="form_1">
              <el-form-item label="请选择系统">
                <el-select v-model="form_1.type" placeholder="请选择系统名称">
                  <el-option label="业务系统" value="srcsystem"></el-option>
                  <el-option label="数据仓库" value="targetsystem"></el-option>
                  <el-option label="ETL" value="etl"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="请输入子系统的名称" :label-width="form_1LabelWidth">
                <el-input v-model="form_1.name" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="请输入子系统的描述" :label-width="form_1LabelWidth">
                <el-input v-model="form_1.desc" auto-complete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogForm_1Visible = false">取 消</el-button>
              <el-button type="primary" @click="attributeModifyPost_1">确 定</el-button>
            </div>
          </el-dialog>
          <el-dialog title="添加数据源" :visible.sync="dialogForm_2Visible">
            <el-form :model="form_2">
              <el-form-item label="数据源名称" :label-width="form_2LabelWidth">
                <el-input v-model="form_2.sourcename" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="数据源类型" :label-width="form_2LabelWidth">
                <!-- <el-input v-model="form_2.cate" auto-complete="off"></el-input> -->
                <el-select v-model="Catevalue" placeholder="请选择">
                  <el-option
                    v-for="item in selectCate"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="数据源描述" :label-width="form_2LabelWidth">
                <el-input v-model="form_2.desc" auto-complete="off"></el-input>
              </el-form-item>
              <!-- <el-form-item label="所属系统" :label-width="form_2LabelWidth">
                <el-input v-model="form_2.syst" auto-complete="off"></el-input>
              </el-form-item> -->
              <el-form-item label="数据库名称" :label-width="form_2LabelWidth">
                <el-input v-model="form_2.dbname" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="数据库类型" :label-width="form_2LabelWidth">
                <!-- <el-input v-model="form_2.dbcate" auto-complete="off"></el-input> -->
                <el-select v-model="dbCatevalue" placeholder="请选择" @change="focusdbCate">
                  <el-option
                    v-for="item in selectdbCate"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="端口号" :label-width="form_2LabelWidth">
                <el-input v-model="form_2.port" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="主机名称" :label-width="form_2LabelWidth">
                <el-input v-model="form_2.name" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="数据库用户名" :label-width="form_2LabelWidth">
                <el-input v-model="form_2.account" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="数据库密码" :label-width="form_2LabelWidth">
                <el-input v-model="form_2.password" auto-complete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogForm_2Visible = false">取 消</el-button>
              <el-button type="primary" @click="attributeModifyPost_2">确 定</el-button>
            </div>
          </el-dialog>
          <!-- 修改的弹出框 -->
          <el-dialog title="修改基本信息" :visible.sync="dialogForm_3Visible">
            <el-form :model="form_3">
              <el-form-item label="数据源名称" :label-width="form_3LabelWidth">
                <el-input v-model="form_3.name" auto-complete="off"></el-input>
              </el-form-item>
              <!-- <el-form-item label="数据源类型" :label-width="form_3LabelWidth">
                <el-input v-model="form_3.cate" auto-complete="off"></el-input>
              </el-form-item> -->
              <el-form-item label="数据源描述" :label-width="form_3LabelWidth">
                <el-input v-model="form_3.desc" auto-complete="off"></el-input>
              </el-form-item>
              <!-- <el-form-item label="所属系统" :label-width="form_3LabelWidth">
                <el-input v-model="form_3.syst" auto-complete="off"></el-input>
              </el-form-item> -->
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogForm_3Visible = false">取 消</el-button>
              <el-button type="primary" @click="attributeModifyPost_3">确 定</el-button>
            </div>
          </el-dialog>
          <el-dialog title="修改连接参数" :visible.sync="dialogForm_4Visible">
            <el-form :model="form_4">
              <el-form-item label="主机名" :label-width="form_4LabelWidth">
                <!-- <br/> -->
                <el-input v-model="form_4.name" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="端口号" :label-width="form_4LabelWidth">
                <el-input v-model="form_4.port" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="数据库名称" :label-width="form_4LabelWidth">
                <el-input v-model="form_4.databasename" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="数据库类型" :label-width="form_4LabelWidth">
                <el-input v-model="form_4.cate" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="数据库用户名" :label-width="form_4LabelWidth">
                <el-input v-model="form_4.account" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="数据库密码" :label-width="form_4LabelWidth">
                <el-input v-model="form_4.password" auto-complete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogForm_4Visible = false">取 消</el-button>
              <el-button type="primary" @click="attributeModifyPost_4">确 定</el-button>
            </div>
          </el-dialog>
          <!-- 删除的对话框 -->
          <el-dialog
            title="提示"
            :visible.sync="DeleteDialogVisible"
            width="30%"
            center>
            <span>此操作将永久删除信息</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="DeleteDialogVisible=false">取 消</el-button>
              <el-button type="primary" @click="attributeDeletePost_1">确 定</el-button>
            </span>
          </el-dialog>

				</el-tab-pane>
       <!-- 采集部分 -->   <!--文字居中  align:center-->
        <el-tab-pane label="采集" name="second" class="liuchengtiao">
          <el-steps :active="active" finish-status="success" simple style="margin-top:20px;width:80%;" align-center>
            <el-step title="新建采集任务" ></el-step>
            <el-step title="参数设置" ></el-step>
            <el-step title="完成" ></el-step>
          </el-steps>
          <!--采集过程第一个过程-->
          <br/><br/>
          <div v-show="isShow" >
            <p>
            <span class="collection_font_style">采集任务名称&nbsp;&nbsp;</span>
            <el-input
              placeholder="请输入任务名称" style="width:40%;"
              v-model="tsakname"
              clearable>
            </el-input>
          </p><br/>
          <p>
            &nbsp;&nbsp;&nbsp;&nbsp;<span class="collection_font_style">数据源&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <el-select v-model="sourcedata" placeholder="请选择" >
              <el-option
                v-for="item in sourcedataarray"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </p><br/>

          <p>
            &nbsp;&nbsp;&nbsp;&nbsp;<span class="collection_font_style">元模型包&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <el-select v-model="sourcesmodelpackage" placeholder="请选择" @blur="loadmodel">
              <el-option
                v-for="item in modelpackage"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </p><br/>

          <p>
            &nbsp;&nbsp;&nbsp;&nbsp;<span class="collection_font_style">元模型&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
           </span>
            <el-select v-model="sourcesmodel" placeholder="请选择" >
              <el-option
                v-for="item in modelarray"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </p><br/>

           <el-button class="collection_button_style" @click="next">下一步</el-button>

          </div>

           <!--采集过程第二个过程-->
           <span  class="collection_font_style2" v-show="paramconfigShow">选择要采集的XXX数据库的元数据</span><br/><br/>

           <div v-show="paramconfigShow">
              <el-radio-group v-model="table_radio">
                  <el-radio :label="1">所有关系表</el-radio>
                  <el-radio :label="2">指定关系表</el-radio>
              </el-radio-group><br/><br/>
           </div>

           <div v-show="paramconfigShow" class="">
            <span class="collection_font_style2">在下面选择要采集数据的关系表</span><br/><br/>
           </div>

           <div class="tableStyle"  v-show="paramconfigShow">
              <el-table
                ref="multipleTable"
                tooltip-effect="dark"
                :data="databasetables"
                height="250"
                border
                style="width: 80%"
                @selection-change="handleSelectionChange">

                  <!--添加复选按钮-->
                 <el-table-column
                    type="selection"
                    width="55">
                  </el-table-column>

                <el-table-column
                  label="表名"
                  width="180">
                  <template slot-scope="scope"> {{ scope.row.tablename }} </template>
                </el-table-column>
                <el-table-column
                  prop="operationname"
                  label="业务名"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="operationdescribe"
                  label="业务说明">
                </el-table-column>
            </el-table>
             <div style="margin-top: 20px;" v-show="paramconfigShow">
              <el-button @click="toggleSelection()">取消选择</el-button>
              <el-button  @click="startcollection">开始采集</el-button>
            </div>

           </div>

           <!--采集过程第三个步骤-->

           <div>
            <span  v-show="collection_result_Show">以下是采集XXX{{ }}数据库元数据的结果：</span><br/><br/>
           </div>

           <div>
           <span style="font-size:16;" v-show="collection_result_Show">XXX数据库的关系表</span><br/><br/>
           </div>

           <div class="tableStyle"  v-show="collection_result_Show">
              <el-table
                :data="collection_result"
                height="250"
                border
                style="width: 80%">
                <el-table-column
                  prop="tablename"
                  label="表名"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="table_servic_name"
                  label="业务名"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="table_servic_decription"
                  label="业务说明">
                </el-table-column>
             </el-table>
           </div><br/>

           <div v-show="collection_result_Show">
           <span style="font-size:16;">关系表的元数据详见元数据页面</span>
           </div>

           <div v-show="collection_result_Show">
            <el-button style="margin-left:30%; margin-top: 12px;" >取消</el-button>
            <el-button style="margin-top: 12px;" @click="surecollection">确定</el-button>
           </div>

        </el-tab-pane>


        <!-- 日志 -->
				<el-tab-pane label="日志" name="third">
          <br/>
          <span class="textTitle">指定查找采集任务的时间：</span>
          <br/><br/>
          <el-row>
            <el-col :span="5">
              <span class="radioText">
            <el-radio v-model="radio_col" label="1">今天执行的</el-radio>
          </span>
          <br/><br/>
          <span class="radioText">
            <el-radio v-model="radio_col" label="2">指定起始时间</el-radio>
          </span>
            </el-col>
            <el-col :span="19"><div style="height:50px">
            <div style="display:none" id="selectTime">
              <el-row :span="24" >
            <el-col :span="2" class="time_1">开始时间:</el-col>
            <el-col :span="2" class="time_2">
              <el-date-picker
                v-model="time_1"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-col>
            <el-col :span="2">&nbsp;</el-col>
            <el-col :span="2" class="time_1">结束时间:</el-col>
            <el-col :span="2" class="time_2">
              <el-date-picker
                v-model="time_2"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-col>
          </el-row>
            </div>
          </div>
          </el-col>
          </el-row>
          <!-- <span class="radioText">
            <el-radio v-model="radio_col" label="1">今天执行的</el-radio>
          </span>
          <br/><br/>
          <span class="radioText">
            <el-radio v-model="radio_col" label="2">指定起始时间</el-radio>
          </span> -->
          <!-- <br/><br/><br/> -->


          <div class="look"><el-button type="primary" plain icon="el-icon-plus" @click="logClick()">查找</el-button></div>
          <br/><br/><br/>
          <div class="table">
          <el-table
          :data="tableData_log"
          border
          style="width:80%">
          <el-table-column
            prop="createdate"
            label="采集时间"
            width="180">
          </el-table-column>
          <el-table-column
            prop="creater"
            label="操作人"
            width="180">
          </el-table-column>
          <el-table-column
            prop="databasename"
            label="数据源">
          </el-table-column>
          <!-- <el-table-column
            prop="id"
            label="数据源2">
          </el-table-column> -->
          <el-table-column
            prop="name"
            label="采集任务名称">
          </el-table-column>
          <el-table-column
            prop="status"
            label="采集状态">
          </el-table-column>
          <el-table-column
            prop="result"
            label="采集行数">
          </el-table-column>
          </el-table>
          </div>
        </el-tab-pane>
			</el-tabs>
		</div>
	</div>

</template>

<script>
import axios from 'axios'
import qs from 'qs'
import mailTable from '@/components/comp/MailTable'
  export default {
    components:{
      mailTable
    },
    data() {
      return {
        activeName: 'first',    //跳转到这个页面时默认加载的格子
        data:[],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
      //   tableData_1: [
      //   {key: '数据源名称', value: '1001'},
      //   {key: '业务说明', value: '篮球'},
      // ],
      tableData_1:[],
      tableData_2:[],
      radio_col: '1',
      input: '',
      tableData_log: [],
        dialogForm_1Visible: false,
        form_1: {
          name: '',
          desc: '',
          type:'',
        },
        form_1LabelWidth: '180px',
        dialogForm_2Visible: false,
        form_2: {
          sourcename: '',
          // cate:'',
          desc:'',
          // syst:'',
          name:'',
          port:'',
          dbname:'',
          dbcate:'',
          account:'',
          password:'',
        },
        // selectCate:'database',
        selectCate: [{
          value: 'database',
          label: 'database'
        }],
        Catevalue:'',
        selectdbCate: [{
          value: 'mysql',
          label: 'mysql'
        }],
        dbCatevalue:'',
        form_2LabelWidth: '180px',
        dialogForm_3Visible: false,
        form_3: {
          id:'',
          name: '',
          cate: '',
          desc:'',
          syst:'',
        },
        form_3LabelWidth: '180px',
        dialogForm_4Visible: false,
        form_4: {
          id:'',
          name: '',
          port: '',
          databasename:'',
          cate:'',
          account:'',
          password:'',
        },
        form_4LabelWidth: '180px',
        DeleteDialogVisible:false,
        level:'',     //这三个都是全局的，level第一次写成小写了，注意
        ID:'',
        LABEL_1:'',    //用于面包屑
        LABEL_2:'',
        LABEL_3:'',
        value_date1: '',
        value_date2: '',

        /*数据初始化部分*/
        tsakname: "",
        sourcesmodelpackage:'',
        sourcesmodel: '',
        sourcedata: '',
        isShow:true,
        active: 0,
        table_radio: 1,
        multipleSelection: [],
        modelpackage: [],
        sourcedataarray:[], //数据源变量
        modelarray: [],
        databasetables: [],

        //数据库ID
        dataBaseId: 2,

        paramconfigShow:false,

        collection_result_Show:false,

        collection_result: [],
        // 日志中的时间选择
        time_1:'',
        time_2:'',
      };
    },
    created (dataBaseId) {
      this.handleNodeClick_tree()
      this.initmodelpackage()
      this.loaddatabasetables(dataBaseId)
      this.show_sourcedata()
    },
    watch:{
      radio_col:function(radio_col){
        //监听radio_col******************************************************************************
        let vm=this;
        if(vm.radio_col==1){
          document.getElementById("selectTime").style.display="none";
        }else if(vm.radio_col==2){
          document.getElementById("selectTime").style.display="block";
        }
      }
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      // 通过点击加载表格的数据
      handleNodeClick(h,node,level,ID,LABEL_1,LABEL_2,LABEL_3) {
        console.log(node)
        console.log(node.data.id)
        console.log(node.level)
        let vm=this;
        vm.level=node.level;
        vm.ID=node.data.id;
        console.log(vm.level+"success");
        if(node.level===3){
          let vm=this;
          let params={
            id:node.data.id
          }
          vm.LABEL_3=node.data.label;
          vm.LABEL_2=node.parent.data.label;
          vm.LABEL_1=node.parent.parent.data.label;
          console.log(vm.LABEL_3+" label3");
          console.log(vm.LABEL_2+" label2");
          console.log(vm.LABEL_1+" label1");
          axios.post('/datasource_connectinfo/getConnectinfo',params)
          .then(function(response){
            console.log(response);
            console.log(response.data.data);
            vm.tableData_1=response.data.data;
          })
          .catch(function(error){
            console.log(error);
          })
          axios.post('/datasource_connectinfo/getDataSource_Connectinfo',params)
          .then(function(response){
            console.log(response);
            console.log(response.data.data);
            vm.tableData_2=response.data.data;
          })
          .catch(function(error){
            console.log(error);
          })
        }else if(node.level===2){
          vm.LABEL_3='';
          vm.LABEL_2=node.data.label;
          vm.LABEL_1=node.parent.data.label;
          console.log(vm.LABEL_3+" label3");
          console.log(vm.LABEL_2+" label2");
          console.log(vm.LABEL_1+" label1");
        }else if(node.level===1){
          vm.LABEL_3='';
          vm.LABEL_2='';
          vm.LABEL_1=node.data.label;
          console.log(vm.LABEL_3+" label3");
          console.log(vm.LABEL_2+" label2");
          console.log(vm.LABEL_1+" label1");
        }
      },
      // 删除，删除之后需重新加载一次tree
      attributeDeletePost_1(ID,level){
        let vm=this;
        let params={
          id:vm.ID
        }
        if(vm.level==3){
          axios.post('/datasource_connectinfo/deleteConnectinfo',params)
        .then(function(response){
            console.log(response);
            vm.DeleteDialogVisible=false;
            if(response.data.result==true){
              vm.$message("删除成功");
              vm.handleNodeClick_tree();
            }
            else{
              vm.$message("删除失败");
            }
        })
        .catch(function(error){
          console.log(error);
        })
      }else if(vm.level==2){
        axios.post('/sourcesystem/deleteSourcesystem',params)
        .then(function(response){
            console.log(response);
            vm.DeleteDialogVisible=false;
            if(response.data.result==true){
              vm.$message("删除成功");
              vm.handleNodeClick_tree();
            }
            else{
              vm.$message("删除失败");
            }
        })
        .catch(function(error){
          console.log(error);
        })
      }

      },
      attributeModifyPost_1(form_1){
        let vm=this;
        let params={
          name:vm.form_1.name,
          describe:vm.form_1.desc,
          type:vm.form_1.type,
        }
        console.log(params);
        axios.post('/sourcesystem/insertSourcesystem',params)
        .then(function(response){
            console.log(response);
            vm.dialogForm_1Visible=false;
            if(response.data.result==true){
              vm.$message("添加成功");
              vm.handleNodeClick_tree();
            }
            else{
              vm.$message("添加失败");
            }
        })
        .catch(function(error){
          console.log(error);
        })
      },
      attributeModifyPost_2(form_2,ID){
        let vm=this;
        // type只能是database或者file,databasetype只能是mysql,oracle,否则会出错，后期加个下拉框
        let params={
          parentid:vm.ID,
          name:vm.form_2.sourcename,
          describe:vm.form_2.desc,
          // type:'database',
          type:vm.Catevalue,
          url:vm.form_2.name,
          port:vm.form_2.port,
          databasename:vm.form_2.dbname,
          databasetype:vm.dbCatevalue,
          // databasetype:'mysql',                         //来个下拉框
          username:vm.form_2.account,
          password:vm.form_2.password,
        }
        // console.log(type+" type")
        console.log(params);
        console.log(vm.ID+" parent")
        axios.post('/datasource_connectinfo/insertConnectinfo',params)
        .then(function(response){
            console.log(response);
            console.log("add")
            vm.dialogForm_2Visible=false;
            if(response.data.result==true){
              vm.$message("添加成功");
              vm.handleNodeClick_tree();
            }
            else{
              vm.$message("添加失败");
            }
        })
        .catch(function(error){
          console.log(error);
        })
      },
      focusdbCate(form_2){
        let vm=this;
        vm.form_2.port='3306'
        console.log(vm.form_2.port)
      },
      // 基本信息的修改的确定按钮框，标案中的数据先传给数据库，再从数据库读取
      attributeModifyPost_3(form_3){
        let vm =this;
        let params = {
          id: vm.form_3.id,
          name: vm.form_3.name,
          describe: vm.form_3.desc,
        }
        console.log(params)
        axios.post('/datasource_connectinfo/updateConnectinfo', params)
        .then(function (response) {
          console.log(response);
          if (response.data.result == true) {
            vm.dialogForm_3Visible = false;
            console.log(form_3);
            // 重新获取表格内容
            let params = {
              id: vm.$refs.tree.getCurrentKey(),
            }
            axios.post('/datasource_connectinfo/getConnectinfo', params)
            .then(function (response) {
              console.log(response);
              vm.tableData_1=response.data.data;
              vm.$refs.tree.getCurrentNode().label=vm.tableData_1[1].value;
            })
            .catch(function (error) {
              console.log(error);
            });
            vm.$message("修改基本信息成功");
          } else {
            vm.$message("修改基本信息失败");
          }
        })
        .catch(function (error) {
          console.log(error);
        });
      },
      // 连接信息的修改的确定按钮框
      attributeModifyPost_4(form_4){
        let vm =this;
        let params = {
          id: vm.form_4.id,
          databasename: vm.form_4.databasename,
          databasetype: vm.form_4.cate,
          url: vm.form_4.name,
          port: vm.form_4.port,
          username: vm.form_4.account,
          password: vm.form_4.password,
        }
        console.log("success");
        console.log(params);
        axios.post('/datasource_connectinfo/updateDatasource_connectinfo', params)
        .then(function (response) {
          console.log(response);
          console.log("success");
          if (response.data.result == true) {
            vm.dialogForm_4Visible = false;
            console.log(form_4);
            // 重新获取表格内容
            let params = {
              id: vm.$refs.tree.getCurrentKey(),
            }
            axios.post('/datasource_connectinfo/getDataSource_Connectinfo', params)
            .then(function (response) {
              console.log(response);
              vm.tableData_2=response.data.data;
            })
            .catch(function (error) {
              console.log(error);
            });
            vm.$message("修改连接信息成功");
          } else {
            vm.$message("修改连接信息失败");
          }
        })
        .catch(function (error) {
          console.log(error);
        });
      },
      dialogForm_AddClick(form_1,form_2,level,ID){
        let vm=this;
        console.log(vm.level+" level")
        console.log(vm.ID+" id")
        if(vm.level==1){
          vm.form_1.name='',                 //是等号不是冒号
          vm.form_1.desc='',
          vm.form_1.type='',
          vm.dialogForm_1Visible = true;
        }else if(vm.level==2){
          vm.form_2.sourcename='',
          // vm.form_2.cate='',
          vm.Catevalue='',
          vm.form_2.sourcename='',
          vm.form_2.desc='',
          vm.form_2.name='',
          vm.form_2.port='',
          // vm.form_2.dbname='',
          vm.dbCatevalue='',
          vm.form_2.dbcate='',
          vm.form_2.account='',
          vm.form_2.password='',
          vm.dialogForm_2Visible = true;
        }
      },
      dialogForm_DelClick(){
        let vm=this;
        vm.DeleteDialogVisible = true;
      },
      NewColClick(activeName){
        let vm=this;
        vm.activeName="second";
      },
      dialogForm_3Click(form_3,tableData_1){
        let vm=this;
        // table前需加vm
        vm.form_3.id=vm.tableData_1[0].value,
        vm.form_3.name=vm.tableData_1[1].value,
        vm.form_3.cate=vm.tableData_1[2].value,
        vm.form_3.desc=vm.tableData_1[3].value,
        vm.form_3.syst=vm.tableData_1[4].value,
        vm.dialogForm_3Visible = true
      },
      dialogForm_4Click(form_4,tableData_2){
        let vm=this;
        vm.form_4.id=vm.tableData_2[0].value,
        vm.form_4.name=vm.tableData_2[1].value,
        vm.form_4.port=vm.tableData_2[2].value,
        vm.form_4.databasename=vm.tableData_2[3].value,
        vm.form_4.cate=vm.tableData_2[4].value,
        vm.form_4.account=vm.tableData_2[5].value,
        vm.form_4.password=vm.tableData_2[6].value,
        vm.dialogForm_4Visible = true
      },

      // 进入页面时加载tree控件
      handleNodeClick_tree(data) {
      		let vm = this;
          console.log(vm.data);
      		axios.get('/sourcesystem/getSourcesystemsList')
          //http://116.62.196.234:8080/MT/sourcesystem/getAllSourcesystems
      		.then(function (response) {
      			console.log(response);
      			console.log(response.data.data);
      			vm.data = response.data.data;
      		})
      		.catch(function (error) {
      			console.log(error);
      		});
      },











      initmodelpackage() {
        // console.log(data);
          let vm = this
          axios.get('/metamodel_hierarchy/getAllMetamodel_package')
          //http://116.62.196.234:8080/MT/sourcesystem/getAllSourcesystems
          .then(function (response) {
            console.log(response);
            console.log(response.data.data);
            vm.modelpackage = response.data.data;
          })
          .catch(function (error) {
            console.log(error);
          });
      },

      //地址需要更新
       show_sourcedata() {
        // console.log(data);
          let vm = this
          axios.get('/datasource_connectinfo/getAllConnectinfo')
          //http://116.62.196.234:8080/MT/sourcesystem/getAllSourcesystems
          .then(function (response) {
            console.log(response);
            console.log(response.data.data);
            vm.sourcedataarray = response.data.data;
          })
          .catch(function (error) {
            console.log(error);
          });
      },





      loadmodel() {
        console.log();
          let vm = this
          let params = {
              id: vm.sourcesmodelpackage,
            }
          axios.post('/metamodel_hierarchy/getSonMetamodel_hierarchy', params)
          //http://116.62.196.234:8080/MT/sourcesystem/getAllSourcesystems
          .then(function (response) {
            console.log(response);
            console.log(response.data.data);
            vm.modelarray = response.data.data;
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      loaddatabasetables(dataBaseId) {
        console.log(dataBaseId);
          let vm = this
          let params = {
              id: vm.dataBaseId,
            }
          axios.post('/kettleMetadataCollect/getTables', params)
          //http://116.62.196.234:8080/MT/sourcesystem/getAllSourcesystems
          .then(function (response) {
            console.log(response);
            console.log(response.data.data);
            vm.databasetables = response.data.data;
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      // append(data) {
      //   const newChild = { id: 100, label: 'testtest', children: [] };
      //   if (!data.children) {
      //     this.$set(data, 'children', []);
      //   }
      //   data.children.push(newChild);
      // },
      // 树形控件添加按钮
      // append(h,node) {
      //   let vm=this;
      //   console.log(node.data);
      //   console.log(node.data.id);
      //   console.log(node.data.label);
      //   // if(node.parent.level===1){
      //   //   console.log("43214321432134321");
      //   // }
      //   if(node.level===1){
      //     vm.form_1.name='';
      //     vm.form_1.desc='';
      //     vm.dialogForm_1Visible = true;
      //     let params={
      //       name:vm.form_1.name,
      //       describe:vm.form_1.desc,
      //       id:vm.$refs.tree.getCheckedNodes().id,
      //     }
      //     axios.post('',params)
      //     .then()
      //     .catch()
      //   }else if(node.level===2){
      //     vm.form_2.name='';
      //     vm.form_2.desc='';
      //     vm.dialogForm_2Visible = true;
      //   }
      // },
      // 树形控件删除按钮
      // remove(node, data) {
      //   const parent = node.parent;
      //   const children = parent.data.children || parent.data;
      //   const index = children.findIndex(d => d.id === data.id);
      //   children.splice(index, 1);
      // },
      // 判断树形中是否有添加和删除按钮
      // isLeaf (node) {
      //   // if (leaf == false) {
      //   if(node.level===1||node.level===2){
      //     return (
      //       <span>
      //         <el-button style="font-size: 12px;" type="text" on-click={ () => this.append(h,node) }><i>+</i></el-button>
      //         <el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(h,node) }>-</el-button>
      //       </span>
      //       )
      //   }else{
      //     return(
      //       <span>
      //         <el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(node) }>-</el-button>
      //       </span>
      //     )
      //   }
      // },
      // renderContent(h, { node, data, store }) {
      //   console.log(node)
      //   return (
      //     <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
      //       <span>
      //         <span>{node.label}</span>
      //       </span>
      //       {this.isLeaf(node)}
      //     </span>);
      // }


      //采集部分方法
      newcollection (){

      },

     next() {
        console.log(this.isShow);
        if (this.active++ > 2) this.active = 0;

        if(this.active==1) {

          this.isShow = false;
          this.paramconfigShow=!this.paramconfigShow;
        }

          // console.log(isShow);
      },


      startcollection() {
        let vm = this
        this.active++;
        console.log(this.active);

          let params = {
              id: this.dataBaseId,
              name:this.tsakname,
              modelpackageid:this.sourcesmodelpackage,
              modelid:this.sourcesmodel,
            }
            console.log(params);

        this.paramconfigShow=!this.paramconfigShow;
        this.collection_result_Show=!this.collection_result_Show;

        axios.post('/kettleMetadataCollect/metadataAutoCollect', params)
          //http://116.62.196.234:8080/MT/sourcesystem/getAllSourcesystems
          .then(function (response) {
            console.log(response);
            console.log(response.data.data);
            vm.collection_result = response.data.data;
            console.log(vm.collection_result);
          })
          .catch(function (error) {
            console.log(error);
          });




      },
      surecollection() {
      console.log("后面再加方法，，，");
      },

    toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      logClick(radio_col,time_1,time_2){
        let vm=this;
        console.log(vm.radio_col+" logtype");
        if(vm.radio_col==1){
          axios.get('/kettleMetadataCollect/getMetadataCollect')
          //http://116.62.196.234:8080/MT/sourcesystem/getAllSourcesystems
          .then(function (response) {
            // console.log(response)    为空的时候返回的是false，所以不判断了，返回什么就是什么
            // if (response.data.result == true){
              console.log(response);
            console.log(response.data.data);
            vm.tableData_log = response.data.data;
            // }
          })
          .catch(function (error) {
            console.log(error);
          });
        }else if(vm.radio_col==2&&(vm.time_1!=''&&vm.time_2!='')){      //等后台写
          if(vm.time_1>=vm.time_2){
            vm.$message("结束时间小于开始时间，请重新选择");
          }
          let params={
          startdate:vm.time_1,
          enddate:vm.time_2,
        }
        console.log(params);
        axios.post('/kettleMetadataCollect/getMetadataCollectSelf',params)
        .then(function(response){
          console.log(response);
          if(response.data.result==true){
            console.log(response.data.data);
            vm.tableData_log = response.data.data;
          }
        })
        .catch(function(error){
          console.log(error);
        })
        }
      },
      // logTimeChange(time_1,time_2){
      //   let vm=this;
      //   console.log(vm.time_1+" time_1");

      // },
      // formatDate:function(value){
      //   const date= new Date(value);

    }
  };
</script>

<style scoped>
.des{
	font-size: 16px;
}
.desbutton{
	float:right;
}
/*.tree{
  height:400px;
  overflow-y: scroll;
}*/
.dataSource{
	background-color: #EBEEF5;
  height:350px;
  overflow-y: scroll;
}
.addColl{
  text-align: center;
}
.collbutton{
  margin-left: 850px;
}
.textTitle{
  font-size: 16px;
  margin-left: 70px;
}
.radioText{
  font-size: 16px;
  margin-left: 70px;
}
.time_1{
  font-size: 16px;
  margin-left: 70px;
}
.time_2{
  width:160px;
}
.time_3{
  font-size: 16px;
  margin-left: 140px;
}
.look{
  /* float:right; */
  text-align: center;
  /*margin-right: 10px;*/
}
.table{
  margin-left: 80px;
}

.liuchengtiao{
  font-size: 16px;
  margin-left:20%;
}
.collection_font_style{
  font-size: 16px;
  margin-left:20%;
}
.collection_font_style2{
	font-size: 16px;
}
.collection_button_style{
  font-size: 16px;
  margin-left:30%;
}
.elTree {
	font-size: 16px;
	background-color: #EBEEF5;
}
.breadcrumb {
	margin-top: 10px;
	margin-bottom:10px;
}
.buttonGroup{
	margin-top: 10px;
}
.decorationLine{
height:1px;
width:100%;
background:#E4E7ED;
overflow:hidden;
margin-top:20px;
margin-bottom:20px;
}
/*.table {
	margin-top:10px;
	margin-bottom:10px;
}*/
/*.timeHidden{
  display:none;
}*/
</style>
